import React,{useState} from 'react'
import "./index.less"
import {withRouter} from 'umi'
import {Breadcrumb,Menu} from 'antd'
import { HomeOutlined, UserOutlined } from '@ant-design/icons';

export default function Breadcrumb_demo(props){
    const {location}=props
    const paths=location.pathname.split('/').filter(i => i)
    console.log(paths)
    return (
        <div className="Breadcrumb_demo">
            <h1>breadcrumb 面包屑</h1>
            <Breadcrumb separator=">">
                <Breadcrumb.Item href="/">
                    <HomeOutlined/>
                    主页
                </Breadcrumb.Item>
                {
                    paths.map((path,i)=>{
                        return (
                            <Breadcrumb.Item key={i}>
                                {path}
                            </Breadcrumb.Item>
                        )
                    })
                }
            </Breadcrumb>
            <br/>
            <Breadcrumb_demo2/>
            <Breadcrumb_demo3 location={location}/>
        </div>
    )
}
//无需传递props
const Breadcrumb_demo2=withRouter(props=>{
    const {location}=props
    console.log(location)
    return (
        <div>
            <h1>Breadcrumb_demo2</h1>
        </div>
    )
})
//需要传递props 自定义分隔符
function Breadcrumb_demo3(props){
    const {location}=props
    console.log(location)
    return (
        <div>
            <h1>Breadcrumb_demo3</h1>
            <Breadcrumb separator="">
                <Breadcrumb.Item>主页</Breadcrumb.Item>
                <Breadcrumb.Separator>=</Breadcrumb.Separator>
                <Breadcrumb.Item overlay={Menus()}>页面1</Breadcrumb.Item>
                <Breadcrumb.Separator>+</Breadcrumb.Separator>
                <Breadcrumb.Item>页面2</Breadcrumb.Item>
            </Breadcrumb>
        </div>
    )
}

function Menus(){
    return (
        <Menu>
            <Menu.Item>111</Menu.Item>
            <Menu.Item>222</Menu.Item>
            <Menu.Item>333</Menu.Item>
        </Menu>
    )
}